import React from 'react';
import {Modal,Form,Input,InputNumber } from 'antd';
import {connect} from 'dva';
const  FormItem=Form.Item;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};


class AddCustomerTypeModalUI extends React.Component {

  handleOk = () => {
      this.props.form.validateFieldsAndScroll((errors, values) => {
        if (errors) {

        } else {
          this.props.dispatch({
            type: 'customerType/e_add',
            payload:values
          });
          this.props.form.resetFields();
          this.props.showOrHiddenModalVisible(false);
        }
      });
  };

  handleCancel = () => {
    this.props.form.resetFields();
    this.props.showOrHiddenModalVisible(false);
  };

  render() {
    return(
      <Modal title="添加会员类型" visible={true} onOk={()=>{this.handleOk()}}
             onCancel={()=>{this.handleCancel()}} okText="确认" cancelText="取消" maskClosable={false}
      >
        <Form>
          <FormItem {...formItemLayout}  label="类型名称" >
            {
              this.props.form.getFieldDecorator('name', {
                rules: [
                  {
                    message:"折扣名称不能为空",
                    required: true,
                  },
                ],
              })(<Input  placeholder="类型名称" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="折扣" >
            {
              this.props.form.getFieldDecorator('discount', {rules: [{required: true, message:"折扣范围[0.01-1.00]",
                type: "number",
                min:0.01,
                max:1.00,
                },],
              })(<InputNumber  placeholder="7折(0.7) 或者 75折(0.75)" style={{width:'325px'}} size="large" precision={2} step={0.01}/>)
            }
          </FormItem>
        </Form>

      </Modal>

    );
  }
}

export default connect()(Form.create()(AddCustomerTypeModalUI));
